<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:replace="header::head-fragment('基本设置')">
</head>

<body>
    <div th:replace="header::header-fragment"></div>

    <div class="layui-container fly-marginTop fly-user-main">
        <ul class="layui-nav layui-nav-tree layui-inline" lay-filter="user">
            <li class="layui-nav-item">
                <a th:href="@{${'/userCenter/'+bbsUser.userId}}">
                    <i class="layui-icon">&#xe609;</i>
                    我的主页
                </a>
            </li>
            <li class="layui-nav-item">
                <a th:href="@{/myCenter}">
                    <i class="layui-icon">&#xe612;</i>
                    用户中心
                </a>
            </li>
            <li class="layui-nav-item layui-this">
                <a th:href="@{/userSet}">
                    <i class="layui-icon">&#xe620;</i>
                    基本设置
                </a>
            </li>
        </ul>

        <div class="fly-panel fly-panel-user" pad20>
            <div class="layui-tab layui-tab-brief" lay-filter="user">
                <ul class="layui-tab-title" id="LAY_mine">
                    <li class="layui-this" lay-id="info">我的资料</li>
                    <li lay-id="avatar">头像</li>
                    <li lay-id="pass">密码</li>
                </ul>
                <div class="layui-tab-content" style="padding: 20px 0;">
                    <div class="layui-form layui-form-pane layui-tab-item layui-show">
                        <form method="post" id="updateInfoForm" onsubmit="return false;" action="##">
                            <div class="layui-form-item">
                                <label for="loginName" class="layui-form-label">登录名</label>
                                <div class="layui-input-inline">
                                    <input type="text" id="loginName" name="loginName" autocomplete="off"
                                        th:value="${bbsUser.loginName}" disabled class="layui-input">
                                </div>
                                <div class="layui-form-mid layui-word-aux">登录名称不可更改</div>
                            </div>
                            <div class="layui-form-item">
                                <label for="nickName" class="layui-form-label">昵称</label>
                                <div class="layui-input-inline">
                                    <input type="text" id="nickName" name="nickName" required lay-verify="required"
                                        autocomplete="off" th:value="${bbsUser.nickName}" class="layui-input">
                                </div>
                                <!-- <div class="layui-form-mid layui-word-aux">支持2-8位的英文和数字昵称</div> -->
                            </div>
                            <div class="layui-form-item">
                                <label for="userGender" class="layui-form-label">性别</label>
                                <div class="layui-input-inline">
                                    <select name="userGender" id="userGender">
                                        <option value="1" th:selected="${bbsUser.gender=='男'} ?true:false">男</option>
                                        <option value="2" th:selected="${bbsUser.gender=='女'} ?true:false">女</option>
                                    </select>
                                </div>
                            </div>
                            <div style="display: none;" class="layui-form-item">
                                <label for="location" class="layui-form-label">城市</label>
                                <div class="layui-input-inline">
                                    <input type="text" id="location" name="location" autocomplete="off"
                                        th:value="${bbsUser.location}" class="layui-input">
                                </div>
                            </div>
                            <div style="display: none;" class="layui-form-item layui-form-text">
                                <label for="introduce" class="layui-form-label">签名</label>
                                <div class="layui-input-block">
                                    <textarea placeholder="随便写些什么刷下存在感" id="introduce" name="introduce"
                                        autocomplete="off" th:text="${bbsUser.introduce}" class="layui-textarea"
                                        style="height: 80px;"></textarea>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <button class="layui-btn" key="set-mine" lay-filter="*" lay-submit
                                    onclick="updateInfo()">
                                    确认修改
                                </button>
                            </div>
                        </form>
                    </div>

                    <div class="layui-form layui-form-pane layui-tab-item">
                        <div class="layui-form-item">
                            <div class="avatar-add">
                                <p>建议尺寸168*168，支持jpg、png、gif，最大不能超过1M</p>
                                <button type="button" id="uploadHeadImg" class="layui-btn upload-img">
                                    <i class="layui-icon">&#xe67c;</i>上传头像
                                </button>
                                <img id="userHeadImg" th:src="@{${bbsUser.headImgUrl}}">
                                <span class="loading"></span>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <button class="layui-btn" key="set-mine" lay-filter="*" lay-submit
                                onclick="updateHeadImg()">
                                确认修改
                            </button>
                        </div>
                    </div>

                    <div class="layui-form layui-form-pane layui-tab-item">
                        <form method="post" id="passwordForm" onsubmit="return false;" action="##">
                            <div class="layui-form-item">
                                <label for="originalPassword" class="layui-form-label">当前密码</label>
                                <div class="layui-input-inline">
                                    <input type="password" id="originalPassword" name="originalPassword" required
                                        lay-verify="required" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label for="newPassword" class="layui-form-label">新密码</label>
                                <div class="layui-input-inline">
                                    <input type="password" id="newPassword" name="newPassword" required
                                        lay-verify="required" autocomplete="off" class="layui-input">
                                </div>
                                <div class="layui-form-mid layui-word-aux">6到20个字符</div>
                            </div>
                            <div class="layui-form-item">
                                <button class="layui-btn" key="set-mine" lay-filter="*" lay-submit
                                    onclick="updatePassword()">
                                    确认修改
                                </button>
                            </div>
                        </form>
                    </div>
                </div>

            </div>
        </div>
    </div>
    </div>

    <div id="footer-container"></div>
    <!-- <div class="fly-footer">
    <p>My-BBS社区 2021 &copy; <a href="https://github.com/ZHENFENG13/My-BBS" target="_blank">十三</a></p>
</div> -->

    <script th:src="@{/layui/layui.js}"></script>
    <script th:src="@{/js/public.js}"></script>
    <script th:src="@{/js/ajaxupload/ajaxupload.js}"></script>

    <script type="text/javascript">
        layui.use(['layer', 'element', 'jquery', 'form'], function () {
            var layer = layui.layer, $ = layui.$, element = layui.element, form = layui.form;
            var device = layui.device();
            //阻止IE7以下访问
            if (device.ie && device.ie < 8) {
                layer.alert('您的浏览器版本过低，请使用微软Edge，谷歌Chrome或者360浏览器访问以体验更佳效果。');
            }

            //图片上传插件初始化 用于头像上传
            new AjaxUpload('#uploadHeadImg', {
                action: '/uploadFile',
                name: 'file',
                autoSubmit: true,
                responseType: "json",
                onSubmit: function (file, extension) {
                    if (!(extension && /^(jpg|jpeg|png|gif)$/.test(extension.toLowerCase()))) {
                        alert('只支持jpg、png、gif格式的文件！');
                        return false;
                    }
                },
                onComplete: function (file, r) {
                    if (r != null && r.resultCode == 200) {
                        $("#userHeadImg").attr("src", r.data);
                        return false;
                    } else {
                        alert("error");
                    }
                }
            });

            //修改个人信息
            window.updateInfo = function () {
                var $ = layui.$;
                var nickName = $("#nickName").val();
                if (!validUserName(nickName)) {
                    layer.alert('请输入正确的昵称!', { title: '提醒', skin: 'layui-layer-molv', icon: 2 });
                    return false;
                }
                var userGender = $('#userGender option:selected').val();
                if (isNull(userGender)) {
                    layer.alert('请选择性别!', { title: '提醒', skin: 'layui-layer-molv', icon: 2 });
                    return;
                }
                var location = $("#location").val();
                if (isNull(location)) {
                    layer.alert('请输入所在城市!', { title: '提醒', skin: 'layui-layer-molv', icon: 2 });
                    return;
                }
                var introduce = $("#introduce").val();
                if (isNull(introduce)) {
                    layer.alert('请输入个性签名!', { title: '提醒', skin: 'layui-layer-molv', icon: 2 });
                    return;
                }
                var params = $("#updateInfoForm").serialize();
                var url = '/updateUserInfo';
                $.ajax({
                    type: 'POST',//方法类型
                    url: url,
                    data: params,
                    success: function (result) {
                        if (result.resultCode == 200) {
                            layer.alert('修改成功!', { title: '信息', skin: 'layui-layer-molv', icon: 1 });
                        } else {
                            layer.msg(result.message);
                        }
                        ;
                    },
                    error: function () {
                        layer.alert('操作失败!', { title: '提醒', skin: 'layui-layer-molv', icon: 2 });
                    }
                });
            }

            //修改头像
            window.updateHeadImg = function () {
                var $ = layui.$;
                var userHeadImg = $('#userHeadImg')[0].src;
                if (isNull(userHeadImg)) {
                    layer.alert('头像不能为空字符串!', { title: '提醒', skin: 'layui-layer-molv', icon: 2 });
                    return false;
                }
                var url = '/updateHeadImg?userHeadImg=' + userHeadImg;
                $.ajax({
                    type: 'POST',//方法类型
                    url: url,
                    success: function (result) {
                        if (result.resultCode == 200) {
                            layer.alert('上传成功!', { title: '信息', skin: 'layui-layer-molv', icon: 1 });
                        } else {
                            layer.msg(result.message);
                        }
                        ;
                    },
                    error: function () {
                        layer.alert('操作失败!', { title: '提醒', skin: 'layui-layer-molv', icon: 2 });
                    }
                });
            }

            //修改密码
            window.updatePassword = function () {
                var $ = layui.$;
                var originalPassword = $("#originalPassword").val();
                if (!validPassword(originalPassword)) {
                    layer.alert('请输入正确的密码格式!', { title: '提醒', skin: 'layui-layer-molv', icon: 2 });
                    return false;
                }
                var newPassword = $("#newPassword").val();
                if (!validPassword(newPassword)) {
                    layer.alert('请输入正确的密码格式!', { title: '提醒', skin: 'layui-layer-molv', icon: 2 });
                    return false;
                }
                if (newPassword != newPassword) {
                    layer.alert('确认密码与密码字段不相同!', { title: '提醒', skin: 'layui-layer-molv', icon: 2 });
                    return false;
                }
                var params = $("#passwordForm").serialize();
                var url = '/updatePassword';
                $.ajax({
                    type: 'POST',//方法类型
                    url: url,
                    data: params,
                    success: function (result) {
                        if (result.resultCode == 200) {
                            layer.alert('修改成功!', { title: '信息', skin: 'layui-layer-molv', icon: 1 });
                        } else {
                            layer.msg(result.message);
                        }
                        ;
                    },
                    error: function () {
                        layer.alert('操作失败!', { title: '提醒', skin: 'layui-layer-molv', icon: 2 });
                    }
                });
            }
            // 我的jquery代码
            $(function () {
                $("#footer-container").load("html/footer.html");
            });
        });
    </script>
</body>

</html>